<template>
	<view class="container">
		<view class="nav" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':statusBarHeight1+'px'}">
			</view>
		</view>
		<view class="">
			<view class="header">
				<view style="display: flex;">
					<view class="avatar" @click="goHome">
						<image v-if="user.is_real==1" src="https://pw.qyang.cc/static/svg/is_real.svg" class="real">
						</image>
						<image class="profile-pic" :src="rq.imgUrl(user.avatar)" mode="aspectFill" />
					</view>
					<view class="user-info">
						<view class="user-info-height">
							<view class="user-info-height-1">
								<text class="username">{{user.nickname}}</text>
								<view class="sex">
									<image :class="user.gender===1?'boy':'girl'"
										:src="user.gender===1?'https://pw.qyang.cc/static/sexW.png':'https://pw.qyang.cc/static/sexM.png'"
										mode=""></image>
									{{user.age?user.age:''}}
								</view>
								<image v-if="user.group_id==2" class="vip" :src="rq.imgUrl(user.vip)" mode=""></image>
							</view>

							<image class="set" src="https://pw.qyang.cc/static/svg/icon-set.svg" mode="" @click="set">
							</image>
						</view>
						<view class="user-info-middle" @click="copy(user.id)">
							<view class="id-icon"> ID </view>
							<text class="user-details">{{user.id}}</text>
							<image src="https://pw.qyang.cc/static/svg/copy.svg" class="copy"></image>
						</view>
					</view>
				</view>
				<view class="user-info-bottom">
					<text class="user-details" v-for="i,a in user.tag" :key="a"
						:style="{background:i.color}">{{i.name}}</text>
					<text @click="goLable" class="user-details user-details2">申领标签</text>
				</view>
			</view>

			<view class="balance">
				<view class="balance-c">
					<text @click="goBalance" class="amount">¥{{user.balance?user.balance:0}}</text>
					<text class="label">账户余额（元）</text>
					<view @click="toCash" class="cash"> 提现 </view>
				</view>
			</view>

			<view class="orders">
				<view @click="toOrder(0)" class="section-title">我的订单
					<view class="right-row">全部
						<u-icon style="display: inline-block" name="arrow-right" size="14" color="#999999"></u-icon>
					</view>
				</view>
				<view class="order-items flex_lr">
					<view class="order-item y_center" @click="toOrder(1)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (2).png" />
						<text class="order-text">待付款</text>
					</view>
					<view class="order-item y_center" @click="toOrder(3)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (7).png" />
						<text class="order-text">待选人</text>
					</view>
					<view class="order-item y_center" @click="toOrder(2)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (1).png" />
						<text class="order-text">待接单</text>
					</view>
					<view class="order-item y_center" @click="toOrder(4)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (3).png" />
						<text class="order-text">已接单</text>
					</view>
					<!-- <view class="order-bottom flex"> -->
					<view class="order-item y_center" @click="toOrder(5)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (4).png" />
						<text class="order-text">服务中</text>
					</view>
					<view class="order-item y_center" @click="toOrder(6)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (5).png" />
						<text class="order-text">已完成</text>
					</view>
					<view class="order-item y_center" @click="toOrder(7)">
						<image class="order-icon" src="https://pw.qyang.cc/static/my/tubiao/order (6).png" />
						<text class="order-text">已取消</text>
					</view>
					<view class="order-item"></view>
					<!-- </view> -->
				</view>
			</view>

			<view class="commission" @click="jump(9)">
				<view class="commission-item">
					<image class="commission-icon" :src="user.image" />
				</view>
			</view>

			<view class="menu">
				<view class="menu-item" @click="jump(0)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/daren.png" />
						<text class="menu-text">达人入驻</text>
					</view><u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(1)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/Frame.png" />
						<text class="menu-text">帖子管理</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(2)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/activity.png" />
						<text class="menu-text">活动管理</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(3)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/activity.png" />
						<text class="menu-text">已报名活动</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(4)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/Frame-2.png" />
						<text class="menu-text">我的收藏</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(5)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/Frame-1.png" />
						<text class="menu-text">优惠券</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(6)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/Frame-3.png" />
						<text class="menu-text">地址库</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(7)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/Frame-4.png" />
						<text class="menu-text">关于平台</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
				<view class="menu-item" @click="jump(8)">
					<view class="menu-item-1">
						<image class="menu-icon" src="https://pw.qyang.cc/static/my/tubiao/service.png" />
						<text class="menu-text">平台客服</text>
					</view>
					<u-icon class="menu-r" style="display: inline-block" name="arrow-right" size="14"
						color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom-tabbar">
			<tabbar :currentPage="4" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				statusBarHeight1: 0,
				titleBarHeight: 0,
				user: {}
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
					this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
					this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
					this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif
					// #ifndef MP-WEIXIN
					this.statusBarHeight = res.statusBarHeight * 1 + 46;
					this.statusBarHeight1 = res.statusBarHeight;
					// #endif
				},
			});
		},
		onShow() {
			this.rq.getData('user/index').then(res => {
				this.user = res.data
				let userInfo = this.user
				uni.setStorageSync('userInfo', JSON.stringify(userInfo))
			})
		},
		methods: {
			goHome() {
				uni.navigateTo({
					url: '/subpages/talent/talent?id=' + this.user.id
				})
			},
			toOrder(index) {
				if (!index) {
					index = 0
				}
				uni.navigateTo({
					url: "/subpages/myOrder/myOrder?type=" + index,
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: String(value),
					success() {
						title: '复制成功~'
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			toCash() {
				uni.navigateTo({
					url: "/pages/mySet/cashOut/cashOut",
				});
			},
			set() {
				uni.navigateTo({
					url: '/subpages/set/set'
				})
			},
			goBalance() {
				uni.navigateTo({
					url: "/pages/mySet/balance/balance",
				});
			},
			goLable() {
				uni.navigateTo({
					url: "/pages/mySet/label/label",
				});
			},
			jump(index) {
				if (index == 0) {
					const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
					if(userInfo.group_id==3){
						uni.showToast({
							title:'您已经成为城市代理人，不可入驻达人~',
							icon:'none'
						})
						return
					}
					uni.navigateTo({
						url: "/subpages/settled/settled",
					});
				}
				if (index == 1) {
					uni.navigateTo({
						url: "/subpages/talent/talent?id=" + this.user.id + '&type=manage',
					});
				}
				if (index == 2) {
					uni.navigateTo({
						url: "/subpages/activity-management/activity-management",
					});
				}
				if (index == 3) {
					uni.navigateTo({
						url: "/subpages/registered-activities/registered-activities",
					});
				}
				if (index == 4) {
					uni.navigateTo({
						url: "/subpages/favorites/favorites",
					});
				}
				if (index == 5) {
					uni.navigateTo({
						url: "/subpages/my-coupons/my-coupons",
					});
				}
				if (index == 6) {
					uni.navigateTo({
						url: "/subpages/set/address",
					});
				}
				if (index == 7) {
					uni.navigateTo({
						url: "/subpages/platform/platform",
					});
				}
				if (index == 8) {
					if (this.user.kf_id) {
						uni.navigateTo({
							url: "/subpages/message/chat?id=" + this.user.kf_id + '&type=kefu',
						});
					} else {
						uni.showToast({
							title: '暂未设置平台客服~',
							icon: 'none'
						})
					}

				}
				if (index == 9) {
					uni.navigateTo({
						url: "/subpages/translation/translation",
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.nav {
		width: 100%;
		height: auto;
		display: table;
		// position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;

		.navon {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0px;
			left: 0px;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}

	.bottom-tabbar {
		position: fixed;
		bottom: 0;
	}

	.menu-r {
		float: right;
		margin-right: 20rpx;
		margin-top: 22rpx;
	}

	.line-img {
		height: 2rpx;
	}

	.fu-title {
		font-size: 24rpx;
	}

	.order-bottom {
		display: flex;
	}

	.order-right {
		margin-right: 90rpx;
	}

	.right-row {
		color: #999999;
		font-size: 24rpx;
		text-align: center;
		// float: right;
		display: flex;
		align-items: center;
	}

	.user-info-bottom {
		padding: 0 46rpx;
		margin-top: 20rpx;

		.user-details {
			display: inline-block;
			text-align: center;
			margin-right: 4rpx;
			width: 114rpx;
			height: 42rpx;
			line-height: 42rpx;
			background-color: #ae9cfe;
			border-radius: 200rpx;
			color: #ffffff;
			font-size: 22rpx;
		}

		.user-details2 {
			background-color: #ff7681;
		}
	}

	.user-info-middle {
		display: flex;
		align-items: center;

		.copy {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.id-icon {
		width: 38rpx;
		height: 24rpx;
		background: #333333;
		border-radius: 44rpx;
		font-family: Fugaz One;
		font-style: italic;
		font-weight: bold;
		color: #ffffff;
		font-size: 20rpx;
		text-align: center;
		line-height: 24rpx;
		margin-right: 10rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		padding: 26rpx;
		padding-bottom: 100rpx;
		background: linear-gradient(to bottom, #ffd3d7, #ffffff);
	}

	.header {
		background-image: url(https://pw.qyang.cc/static/my/bj.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position-y: bottom;
		// height: 236rpx;
		padding-bottom: 50rpx;
		/* display: flex; */
		align-items: center;
		justify-content: space-between;
		// background-color: #FFEDED;
		margin-top: 43rpx;
		// padding-top: 46rpx;
		position: relative;
		/* border-radius: 10px; */
	}

	.avatar {
		position: relative;
		width: 152rpx;
		height: 152rpx;
		margin-top: -50rpx;
		margin-left: 24rpx;

		.real {
			width: 26.25rpx;
			height: 30rpx;
			position: absolute;
			bottom: -8rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.profile-pic {
		width: 152rpx;
		height: 152rpx;
		border-radius: 50%;
		// position: absolute;
		// top: -50rpx;
		// margin-left: 24rpx;
		border: 2rpx solid #505050;
		box-sizing: border-box;
	}

	.user-info {
		flex: 1;
		margin-left: 24px;
		// margin-top: 46rpx;
		padding-top: 20rpx;

		.user-info-height {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 40rpx;

			.user-info-height-1 {
				display: flex;
				align-items: center;

				.sex {
					margin-left: 12rpx;
					text-align: center;
					line-height: 32rpx;
					width: 84rpx;
					height: 32rpx;
					border-radius: 176px;
					opacity: 1;

					background: rgba(253, 168, 175, 0.2);
					font-family: 阿里巴巴普惠体 2;
					font-size: 11px;
					font-weight: 500;
					line-height: 15px;
					letter-spacing: 0px;

					color: #ff7681;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.girl {
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				.boy {
					background: #28aed920;
					width: 20rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}

				.vip {
					width: 52px;
					height: 28px;
				}
			}

			.set {
				width: 20px;
				height: 20px;
			}
		}
	}

	.username {
		font-size: 18px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200rpx;
	}

	.user-details {
		font-size: 14px;
		color: #888;
	}

	.icons {
		display: flex;
	}

	.icon {
		width: 24px;
		height: 24px;
		margin-left: 5px;
	}

	.balance {
		display: flex;
		align-items: center;
		background-color: #fffefe;
		color: #fff;
		padding: 11px;
		margin-top: -20rpx;
		padding-top: 40rpx;

		/* border-radius: 10px; */
		/* margin: 10px 0; */
		.balance-c {
			box-sizing: border-box;
			width: 652rpx;
			height: 186rpx;
			margin-top: 10rpx;
			padding-top: 20rpx;
			border-radius: 20rpx;
			background-image: url(https://pw.qyang.cc/static/my-icon-bg.png);
			background-size: 100%;
			position: relative;
		}
	}

	.amount {
		font-size: 58rpx;
		font-family: 阿里巴巴普惠体 2;
		display: block;
		margin-left: 20rpx;
		line-height: 70rpx;
	}

	.label {
		font-size: 14px;
		margin-left: 10px;
		display: block;
		margin-left: 24rpx;
		margin-top: 10rpx;
	}

	.cash {
		width: 124rpx;
		height: 56rpx;
		background-color: #fffefe;
		border-radius: 31rpx;
		color: #ff7681;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
		position: absolute;
		bottom: 24rpx;
		right: 18rpx;
	}

	.orders,
	.menu {
		background-color: #fff;
		padding: 11px;

		// border-radius: 10px;
		margin-bottom: 10px;
	}

	.commission {
		background-color: #fff;
		padding: 11px;
		position: relative;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.section-title {
		// font-size: 16px;
		// font-weight: bold;
		// margin-bottom: 40rpx;
		// display: block;

		font-size: 16px;
		font-weight: bold;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.order-items {
		// display: flex;
		// flex-direction: column;
		// width: 552rpx;
		font-size: 24rpx;
		height: 298rpx;
		flex-wrap: wrap;
	}

	.order-item {
		// display: flex;
		// align-items: center;
		margin-bottom: 5px;
		width: 25%;
		// flex-wrap: wrap;
		height: 96rpx;
	}

	.order-icon {
		width: 24px;
		height: 24px;
		margin-right: 5px;
		margin-left: 5px;
	}

	.order-text {
		font-size: 12px;
		display: block;
	}

	.commission-item {
		// width: 652rpx;
		height: 156rpx;
		border-radius: 20rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 652rpx;
			height: 156rpx;
		}
	}

	.commission-title {
		margin-left: 12rpx;
		font-size: 40rpx;
		margin-bottom: 13rpx;
		display: block;
		font-size: 16px;
		font-weight: bold;
	}

	.commission-icon {
		width: 138rpx;
		height: 116rpx;
	}

	.menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 5px;
		border-bottom: 1px solid #e0e0e0;
		line-height: 72rpx;
		height: 72rpx;

		.menu-item-1 {
			display: flex;
			align-items: center;
		}
	}

	.menu-icon {
		width: 26rpx;
		height: 26rpx;
		margin-right: 16rpx;
	}

	.menu-text {
		font-size: 28rpx;
	}
</style>